var moreButtonsPanel = new Ext.Panel({
    layout: {
        type : 'vbox',
        pack : 'center',
        align: 'stretch'
    },
    defaults: {
        xtype: 'button',
        flex : 1
    },
    items:[
    new Ext.Button({
        ui  : 'round',
        cls  : 'contact-btn',
        text: 'Contact',
        handler:function(){
            wrapPanel.setActiveItem(1); 
        }
    }),
    new Ext.Button({
        ui  : 'round',
        cls  : 'reg-btn',
        text: 'Registration',
        handler:function(){
            wrapPanel.setActiveItem(2); 
        }
    })
    ]
})
var moreContent = new Ext.Panel({
    scroll:'vertical',
    cls:'more-summary',
    styleHtmlContent:true,
    html:"In this article, we have looked at the basic techniques of architecting your application. Of course, there is a lot to it, and in the next part of this series we will take a look at some more advanced controller techniques and continue wiring up our Panda app by implementing our controller actions and adding some more details to our views."
})

var moreItems = new Ext.Panel({
    fullScreen:true,
    dockedItems:{
        xtype:'toolbar',
        title:'Dubai Calendar'
    },
    items:[
    moreContent,
    moreButtonsPanel
    ]
});

var conactElem = new Ext.Panel({
    //fullscreen:true,
    layout:'fit',
    html:"dasfsdfsd sdfisdhfo sdufiph",
    styleHtmlContent:true
    //store:contactStore,
})
var contactView = new Ext.Panel({
    //fullscreen:true,
    //layout:'fit',
    id:"contact-view",
    items:[{
        xtype:'contactform'
    }]
})

var contactForm =  new Ext.Panel({
    id:"contact",
    //fullscreen:true,
    //layout:'fit',
    scroll: 'vertical',
    dockedItems:[{
        xtype:'toolbar',
        title:'Contact'
    }],
    items:[conactElem, contactView]
})

var registrationForm =  new Ext.Panel({
    id:"reg",
    fullscreen:true,
    dockedItems:[{
        xtype:'toolbar',
        title:'Register an Event'
    }],
    items:[{
        //scroll: 'vertical',
        xtype:'regform'
    }]
})

var wrapPanel = new Ext.Panel({
    fullScreen:true,
    layout:'card',
    items:[
    moreItems,
    contactForm,
    registrationForm
    ]
})

//More
DC.views.more = Ext.extend(Ext.Panel,{
    title:'More',
    iconCls:'more_dc',
    id:'mainPanel',
    layout:'fit',
    fullscreen:true,
    items:[
    wrapPanel
    ]
});

Ext.reg('more', DC.views.more);